<template><div><h2 id="laravel-dusk" tabindex="-1"><a class="header-anchor" href="#laravel-dusk"><span>Laravel Dusk</span></a></h2>
<ul>
<li><a href="#introduction">介绍</a></li>
<li><a href="#installation">安装</a>
<ul>
<li><a href="#managing-chromedriver-installations">管理 ChromeDriver 安装</a></li>
<li><a href="#using-other-browsers">使用其他浏览器</a></li>
</ul>
</li>
<li><a href="#getting-started">入门</a>
<ul>
<li><a href="#generating-tests">生成测试</a></li>
<li><a href="#resetting-the-database-after-each-test">每个测试后重置数据库</a></li>
<li><a href="#running-tests">运行测试</a></li>
<li><a href="#environment-handling">环境处理</a></li>
</ul>
</li>
<li><a href="#browser-basics">浏览器基础知识</a>
<ul>
<li><a href="#creating-browsers">创建浏览器</a></li>
<li><a href="#navigation">导航</a></li>
<li><a href="#resizing-browser-windows">调整浏览器窗口大小</a></li>
<li><a href="#browser-macros">浏览器宏</a></li>
<li><a href="#authentication">认证</a></li>
<li><a href="#cookies">Cookies</a></li>
<li><a href="#executing-javascript">执行 JavaScript</a></li>
<li><a href="#taking-a-screenshot">截屏</a></li>
<li><a href="#storing-console-output-to-disk">将控制台输出存储到磁盘</a></li>
<li><a href="#storing-page-source-to-disk">将页面源代码存储到磁盘</a></li>
</ul>
</li>
<li><a href="#interacting-with-elements">与元素交互</a>
<ul>
<li><a href="#dusk-selectors">Dusk 选择器</a></li>
<li><a href="#text-values-and-attributes">文本、值和属性</a></li>
<li><a href="#interacting-with-forms">与表单交互</a></li>
<li><a href="#attaching-files">上传文件</a></li>
<li><a href="#pressing-buttons">点击按钮</a></li>
<li><a href="#clicking-links">点击链接</a></li>
<li><a href="#using-the-keyboard">使用键盘</a></li>
<li><a href="#using-the-mouse">使用鼠标</a></li>
<li><a href="#javascript-dialogs">JavaScript 对话框</a></li>
<li><a href="#scoping-selectors">选择器作用域</a></li>
<li><a href="#waiting-for-elements">等待元素</a></li>
<li><a href="#scrolling-an-element-into-view">滚动元素到视图</a></li>
</ul>
</li>
<li><a href="#available-assertions">可用的断言</a></li>
<li><a href="#pages">页面</a>
<ul>
<li><a href="#generating-pages">生成页面</a></li>
<li><a href="#configuring-pages">配置页面</a></li>
<li><a href="#navigating-to-pages">导航到页面</a></li>
<li><a href="#shorthand-selectors">速记选择器</a></li>
<li><a href="#page-methods">页面方法</a></li>
</ul>
</li>
<li><a href="#components">组件</a>
<ul>
<li><a href="#generating-components">生成组件</a></li>
<li><a href="#using-components">使用组件</a></li>
</ul>
</li>
<li><a href="#continuous-integration">持续集成</a>
<ul>
<li><a href="#running-tests-on-heroku-ci">Heroku CI</a></li>
<li><a href="#running-tests-on-travis-ci">Travis CI</a></li>
<li><a href="#running-tests-on-github-actions">GitHub Actions</a></li>
</ul>
</li>
</ul>
<h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍"><span>介绍</span></a></h2>
<p><a href="https://github.com/laravel/dusk" target="_blank" rel="noopener noreferrer">Laravel Dusk</a> 提供了一套富有表现力、易于使用的浏览器自动化和测试 API。默认情况下，Dusk 不需要在本地计算机上安装 JDK 或 Selenium。相反，Dusk 使用一个独立的 <a href="https://sites.google.com/chromium.org/driver" target="_blank" rel="noopener noreferrer">ChromeDriver</a> 安装包。你可以自由地使用任何其他兼容 Selenium 的驱动程序。</p>
<h2 id="安装" tabindex="-1"><a class="header-anchor" href="#安装"><span>安装</span></a></h2>
<p>为了开始使用，你需要先安装 <a href="https://www.google.com/chrome" target="_blank" rel="noopener noreferrer">Google Chrome</a> 并将 <code v-pre>laravel/dusk</code> Composer 依赖添加到你的项目中：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line"><span class="token function">composer</span> require <span class="token parameter variable">--dev</span> laravel/dusk</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p><strong>警告</strong><br>
如果你手动注册 Dusk 的服务提供者，在生产环境中 <strong>绝不要</strong> 注册，因为这可能导致任意用户能够认证你的应用程序。</p>
</blockquote>
<p>安装 Dusk 包后，执行 <code v-pre>dusk:install</code> Artisan 命令。<code v-pre>dusk:install</code> 命令将会创建一个 <code v-pre>tests/Browser</code> 目录，一个示例 Dusk 测试，并为你的操作系统安装 Chrome 驱动程序二进制文件：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan dusk:install</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>接下来，在应用程序的 <code v-pre>.env</code> 文件中设置 <code v-pre>APP_URL</code> 环境变量。该值应该与你用于在浏览器中访问应用程序的 URL 匹配。</p>
<blockquote>
<p><strong>注意</strong><br>
如果你正在使用 <a href="https://learnku.com/docs/laravel/10.x/sail" target="_blank" rel="noopener noreferrer">Laravel Sail</a> 管理你的本地开发环境，请参阅 Sail 文档中有关<a href="https://learnku.com/docs/laravel/10.x/sail#laravel-dusk" target="_blank" rel="noopener noreferrer">配置和运行 Dusk 测试</a>的内容。</p>
</blockquote>
<h3 id="管理-chromedriver-安装" tabindex="-1"><a class="header-anchor" href="#管理-chromedriver-安装"><span>管理 ChromeDriver 安装</span></a></h3>
<p>如果你想安装与 Laravel Dusk 通过 <code v-pre>dusk:install</code> 命令安装的不同版本的 ChromeDriver，则可以使用 <code v-pre>dusk:chrome-driver</code> 命令：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line"><span class="token comment"># 为你的操作系统安装最新版本的 ChromeDriver...</span></span>
<span class="line">php artisan dusk:chrome-driver</span>
<span class="line"></span>
<span class="line"><span class="token comment"># 为你的操作系统安装指定版本的 ChromeDriver...</span></span>
<span class="line">php artisan dusk:chrome-driver <span class="token number">86</span></span>
<span class="line"></span>
<span class="line"><span class="token comment"># 为所有支持的操作系统安装指定版本的 ChromeDriver...</span></span>
<span class="line">php artisan dusk:chrome-driver <span class="token parameter variable">--all</span></span>
<span class="line"></span>
<span class="line"><span class="token comment"># 为你的操作系统安装与 Chrome / Chromium 检测到的版本匹配的 ChromeDriver...</span></span>
<span class="line">php artisan dusk:chrome-driver <span class="token parameter variable">--detect</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p><strong>警告</strong><br>
Dusk 需要 <code v-pre>chromedriver</code> 二进制文件可执行。如果你无法运行 Dusk，你应该使用以下命令确保二进制文件可执行：<code v-pre>chmod -R 0755 vendor/laravel/dusk/bin/</code>。</p>
</blockquote>
<h3 id="使用其他浏览器" tabindex="-1"><a class="header-anchor" href="#使用其他浏览器"><span>使用其他浏览器</span></a></h3>
<p>默认情况下，Dusk 使用 Google Chrome 和独立的 <a href="https://sites.google.com/chromium.org/driver" target="_blank" rel="noopener noreferrer">ChromeDriver</a> 安装来运行你的浏览器测试。但是，你可以启动自己的 Selenium 服务器，并运行你希望的任何浏览器来运行测试。</p>
<p>要开始，请打开你的 <code v-pre>tests/DuskTestCase.php</code> 文件，该文件是你的应用程序的基本 Dusk 测试用例。在这个文件中，你可以删除对 <code v-pre>startChromeDriver</code> 方法的调用。这将停止 Dusk 自动启动 ChromeDriver：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 准备执行 Dusk 测试。</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@beforeClass</span></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">function</span> <span class="token function-definition function">prepare</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// static::startChromeDriver();</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>接下来，你可以修改 <code v-pre>driver</code> 方法来连接到你选择的 URL 和端口。此外，你可以修改应该传递给 WebDriver 的“期望能力”：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Facebook<span class="token punctuation">\</span>WebDriver<span class="token punctuation">\</span>Remote<span class="token punctuation">\</span>RemoteWebDriver</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 创建 RemoteWebDriver 实例。</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">driver</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token class-name return-type">RemoteWebDriver</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">RemoteWebDriver</span><span class="token operator">::</span><span class="token function">create</span><span class="token punctuation">(</span></span>
<span class="line">        <span class="token string single-quoted-string">'http://localhost:4444/wd/hub'</span><span class="token punctuation">,</span> <span class="token class-name static-context">DesiredCapabilities</span><span class="token operator">::</span><span class="token function">phantomjs</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="入门" tabindex="-1"><a class="header-anchor" href="#入门"><span>入门</span></a></h2>
<h3 id="生成测试" tabindex="-1"><a class="header-anchor" href="#生成测试"><span>生成测试</span></a></h3>
<p>要生成 Dusk 测试，请使用 <code v-pre>dusk:make</code> Artisan 命令。生成的测试将放在 <code v-pre>tests/Browser</code> 目录中：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan dusk:make LoginTest</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="在每次测试后重置数据库" tabindex="-1"><a class="header-anchor" href="#在每次测试后重置数据库"><span>在每次测试后重置数据库</span></a></h3>
<p>你编写的大多数测试将与从应用程序数据库检索数据的页面交互；然而，你的 Dusk 测试不应该使用 <code v-pre>RefreshDatabase</code> trait。<code v-pre>RefreshDatabase</code> trait 利用数据库事务，这些事务将不适用或不可用于 HTTP 请求。相反，你有两个选项：<code v-pre>DatabaseMigrations</code> trait 和 <code v-pre>DatabaseTruncation</code> trait。</p>
<h4 id="使用数据库迁移" tabindex="-1"><a class="header-anchor" href="#使用数据库迁移"><span>使用数据库迁移</span></a></h4>
<p><code v-pre>DatabaseMigrations</code> trait 会在每次测试之前运行你的数据库迁移。但是，为了每次测试而删除和重新创建数据库表通常比截断表要慢：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>User</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Foundation<span class="token punctuation">\</span>Testing<span class="token punctuation">\</span>DatabaseMigrations</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Chrome</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>DuskTestCase</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">ExampleTest</span> <span class="token keyword">extends</span> <span class="token class-name">DuskTestCase</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">DatabaseMigrations</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p><strong>警告</strong><br>
当执行 Dusk 测试时，不能使用 SQLite 内存数据库。由于浏览器在其自己的进程中执行，因此它将无法访问其他进程的内存数据库。</p>
</blockquote>
<h4 id="使用数据库截断" tabindex="-1"><a class="header-anchor" href="#使用数据库截断"><span>使用数据库截断</span></a></h4>
<p>在使用 <code v-pre>DatabaseTruncation</code> trait 之前，你必须使用 Composer 包管理器安装 <code v-pre>doctrine/dbal</code> 包：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line"><span class="token function">composer</span> require <span class="token parameter variable">--dev</span> doctrine/dbal</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>DatabaseTruncation</code> trait 将在第一次测试时迁移你的数据库，以确保你的数据库表已经被正确创建。但是，在后续测试中，数据库表将仅被截断 - 相比重新运行所有的数据库迁移，这样做可以提高速度：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>User</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Foundation<span class="token punctuation">\</span>Testing<span class="token punctuation">\</span>DatabaseTruncation</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Chrome</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>DuskTestCase</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">ExampleTest</span> <span class="token keyword">extends</span> <span class="token class-name">DuskTestCase</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">DatabaseTruncation</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>默认情况下，此 trait 将截断除 <code v-pre>migrations</code> 表以外的所有表。如果你想自定义应该截断的表，则可以在测试类上定义 <code v-pre>$tablesToTruncate</code> 属性：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 表示应该截断哪些表。</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@var</span> <span class="token class-name"><span class="token keyword">array</span></span></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">protected</span> <span class="token variable">$tablesToTruncate</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'users'</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>或者，你可以在测试类上定义 <code v-pre>$exceptTables</code> 属性，以指定应该从截断中排除的表：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 表示应该从截断中排除哪些表。</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@var</span> <span class="token class-name"><span class="token keyword">array</span></span></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">protected</span> <span class="token variable">$exceptTables</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'users'</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>为了指定需要清空表格的数据库连接，你可以在测试类中定义一个 <code v-pre>$connectionsToTruncate</code> 属性：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 表示哪些连接需要清空表格。</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@var</span> <span class="token class-name"><span class="token keyword">array</span></span></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">protected</span> <span class="token variable">$connectionsToTruncate</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'mysql'</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="运行测试" tabindex="-1"><a class="header-anchor" href="#运行测试"><span>运行测试</span></a></h3>
<p>要运行浏览器测试，执行 <code v-pre>dusk</code> Artisan 命令：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan dusk</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如果上一次运行 <code v-pre>dusk</code> 命令时出现了测试失败，你可以通过 <code v-pre>dusk:fails</code> 命令先重新运行失败的测试，以节省时间：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan dusk:fails</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>dusk</code> 命令接受任何 PHPUnit 测试运行器通常接受的参数，例如你可以只运行给定<a href="https://phpunit.readthedocs.io/en/9.5/annotations.html#group" target="_blank" rel="noopener noreferrer">组</a>的测试：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan dusk <span class="token parameter variable">--group</span><span class="token operator">=</span>foo</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p><strong>注意</strong><br>
如果你正在使用 <a href="https://learnku.com/docs/laravel/10.x/sail" target="_blank" rel="noopener noreferrer">Laravel Sail</a> 来管理本地开发环境，请参考 Sail 文档中有关<a href="https://learnku.com/docs/laravel/10.x/sail#laravel-dusk" target="_blank" rel="noopener noreferrer">配置和运行 Dusk 测试</a>的部分。</p>
</blockquote>
<h4 id="手动启动-chromedriver" tabindex="-1"><a class="header-anchor" href="#手动启动-chromedriver"><span>手动启动 ChromeDriver</span></a></h4>
<p>默认情况下，Dusk 会自动尝试启动 ChromeDriver。如果对于你的特定系统无法自动启动，你可以在运行 <code v-pre>dusk</code> 命令之前手动启动 ChromeDriver。如果你选择手动启动 ChromeDriver，则应该注释掉 <code v-pre>tests/DuskTestCase.php</code> 文件中的以下代码：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 为 Dusk 测试执行做准备。</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@beforeClass</span></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">function</span> <span class="token function-definition function">prepare</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// static::startChromeDriver();</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>此外，如果你在端口 9515 以外的端口上启动 ChromeDriver，你需要修改同一类中的 <code v-pre>driver</code> 方法以反映正确的端口：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Facebook<span class="token punctuation">\</span>WebDriver<span class="token punctuation">\</span>Remote<span class="token punctuation">\</span>RemoteWebDriver</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 创建 RemoteWebDriver 实例。</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">driver</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token class-name return-type">RemoteWebDriver</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">RemoteWebDriver</span><span class="token operator">::</span><span class="token function">create</span><span class="token punctuation">(</span></span>
<span class="line">        <span class="token string single-quoted-string">'http://localhost:9515'</span><span class="token punctuation">,</span> <span class="token class-name static-context">DesiredCapabilities</span><span class="token operator">::</span><span class="token function">chrome</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="环境处理" tabindex="-1"><a class="header-anchor" href="#环境处理"><span>环境处理</span></a></h3>
<p>如果要在运行测试时强制 Dusk 使用自己的环境文件，请在项目根目录中创建一个 <code v-pre>.env.dusk.{当前环境}</code> 文件。例如，如果你将从你的 <code v-pre>local</code> 环境启动 <code v-pre>dusk</code> 命令，你应该创建一个 <code v-pre>.env.dusk.local</code> 文件。</p>
<p>在运行测试时，Dusk 将备份你的 <code v-pre>.env</code> 文件，并将你的 Dusk 环境重命名为 <code v-pre>.env</code>。测试完成后，会将你的 <code v-pre>.env</code> 文件还原。</p>
<h2 id="浏览器基础知识" tabindex="-1"><a class="header-anchor" href="#浏览器基础知识"><span>浏览器基础知识</span></a></h2>
<h3 id="创建浏览器" tabindex="-1"><a class="header-anchor" href="#创建浏览器"><span>创建浏览器</span></a></h3>
<p>为了开始学习，我们编写一个测试，验证我们能否登录到我们的应用程序。生成测试后，我们可以修改它以导航到登录页面，输入一些凭据并点击“登录”按钮。为了创建一个浏览器实例，你可以在 Dusk 测试中调用 <code v-pre>browse</code> 方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>User</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Foundation<span class="token punctuation">\</span>Testing<span class="token punctuation">\</span>DatabaseMigrations</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Chrome</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>DuskTestCase</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">ExampleTest</span> <span class="token keyword">extends</span> <span class="token class-name">DuskTestCase</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">DatabaseMigrations</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 一个基本的浏览器测试示例。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">test_basic_example</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$user</span> <span class="token operator">=</span> <span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token function">factory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'email'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'taylor@laravel.com'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">browse</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token variable">$user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/login'</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'email'</span><span class="token punctuation">,</span> <span class="token variable">$user</span><span class="token operator">-></span><span class="token property">email</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'password'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'password'</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">press</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Login'</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">assertPathIs</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/home'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如上面的例子所示，<code v-pre>browse</code> 方法接受一个闭包。浏览器实例将由 Dusk 自动传递给此闭包，并且是与应用程序交互和进行断言的主要对象。</p>
<h4 id="创建多个浏览器" tabindex="-1"><a class="header-anchor" href="#创建多个浏览器"><span>创建多个浏览器</span></a></h4>
<p>有时你可能需要多个浏览器来正确地进行测试。例如，测试与 WebSockets 交互的聊天屏幕可能需要多个浏览器。要创建多个浏览器，只需将更多的浏览器参数添加到传递给 <code v-pre>browse</code> 方法的闭包签名中即可：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">browse</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$first</span><span class="token punctuation">,</span> <span class="token class-name type-declaration">Browser</span> <span class="token variable">$second</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$first</span><span class="token operator">-></span><span class="token function">loginAs</span><span class="token punctuation">(</span><span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">          <span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/home'</span><span class="token punctuation">)</span></span>
<span class="line">          <span class="token operator">-></span><span class="token function">waitForText</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Message'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$second</span><span class="token operator">-></span><span class="token function">loginAs</span><span class="token punctuation">(</span><span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">           <span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/home'</span><span class="token punctuation">)</span></span>
<span class="line">           <span class="token operator">-></span><span class="token function">waitForText</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Message'</span><span class="token punctuation">)</span></span>
<span class="line">           <span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'message'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Hey Taylor'</span><span class="token punctuation">)</span></span>
<span class="line">           <span class="token operator">-></span><span class="token function">press</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Send'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$first</span><span class="token operator">-></span><span class="token function">waitForText</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hey Taylor'</span><span class="token punctuation">)</span></span>
<span class="line">          <span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Jeffrey Way'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="导航" tabindex="-1"><a class="header-anchor" href="#导航"><span>导航</span></a></h3>
<p><code v-pre>visit</code> 方法可用于在应用程序中导航到给定的 URI：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你可以使用 <code v-pre>visitRoute</code> 方法来导航到 <a href="https://learnku.com/docs/laravel/10.x/routing#named-routes" target="_blank" rel="noopener noreferrer">命名路由</a>：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visitRoute</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你可以使用 <code v-pre>back</code> 和 <code v-pre>forward</code> 方法来导航「后退」和「前进」：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以使用 <code v-pre>refresh</code> 方法来刷新页面：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">refresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="调整浏览器窗口大小" tabindex="-1"><a class="header-anchor" href="#调整浏览器窗口大小"><span>调整浏览器窗口大小</span></a></h3>
<p>你可以使用 <code v-pre>resize</code> 方法来调整浏览器窗口的大小：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">resize</span><span class="token punctuation">(</span><span class="token number">1920</span><span class="token punctuation">,</span> <span class="token number">1080</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你可以使用 <code v-pre>maximize</code> 方法来最大化浏览器窗口：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">maximize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>fitContent</code> 方法将调整浏览器窗口的大小以匹配其内容的大小：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">fitContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>当测试失败时，Dusk 将在截取屏幕截图之前自动调整浏览器大小以适合内容。你可以在测试中调用 <code v-pre>disableFitOnFailure</code> 方法来禁用此功能：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">disableFitOnFailure</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你可以使用<code v-pre>move</code>方法将浏览器窗口移动到屏幕上的其他位置：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">move</span><span class="token punctuation">(</span><span class="token variable">$x</span> <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token variable">$y</span> <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="浏览器宏" tabindex="-1"><a class="header-anchor" href="#浏览器宏"><span>浏览器宏</span></a></h3>
<p>如果你想定义一个可以在各种测试中重复使用的自定义浏览器方法，可以在<code v-pre>Browser</code>类中使用<code v-pre>macro</code>方法。通常，你应该从<a href="https://learnku.com/docs/laravel/10.x/providers" target="_blank" rel="noopener noreferrer">服务提供者</a>的<code v-pre>boot</code>方法中调用它：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Providers</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>ServiceProvider</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">DuskServiceProvider</span> <span class="token keyword">extends</span> <span class="token class-name">ServiceProvider</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 注册 《Dusk》 的浏览器宏。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token class-name static-context">Browser</span><span class="token operator">::</span><span class="token function">macro</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'scrollToElement'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$element</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">script</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"$('html, body').animate({ scrollTop: $('<span class="token interpolation"><span class="token variable">$element</span></span>').offset().top }, 0);"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token keyword">return</span> <span class="token variable">$this</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>该 <code v-pre>macro</code> 函数接收方法名作为其第一个参数，并接收闭包作为其第二个参数。 将宏作为<code v-pre>Browser</code>实现上的方法调用宏时，将执行宏的闭包：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">browse</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token variable">$user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/pay'</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">scrollToElement</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'#credit-card-details'</span><span class="token punctuation">)</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Enter Credit Card Details'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="用户认证" tabindex="-1"><a class="header-anchor" href="#用户认证"><span>用户认证</span></a></h3>
<p>我们经常会测试需要身份验证的页面，你可以使用 Dusk 的<code v-pre>loginAs</code>方法来避免在每次测试期间与登录页面进行交互。该<code v-pre>loginAs</code>方法接收用户 ID 或者用户模型实例</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>User</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">browse</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">loginAs</span><span class="token punctuation">(</span><span class="token class-name static-context">User</span><span class="token operator">::</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line">          <span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/home'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p><strong>注意</strong><br>
使用<code v-pre>loginAs</code>方法后，用户会话在文件中的所有测试被维护。</p>
</blockquote>
<h3 id="cookies" tabindex="-1"><a class="header-anchor" href="#cookies"><span>Cookies</span></a></h3>
<p>你可以使用<code v-pre>cookie</code>方法来获取或者设置加密过的 cookie 的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">cookie</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">cookie</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Taylor'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用<code v-pre>plainCookie</code>则可以获取或者设置未加密过的 cookie 的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">plainCookie</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">plainCookie</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Taylor'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以使用<code v-pre>deleteCookie</code>方法删除指定的 cookie：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">deleteCookie</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="运行-javascript" tabindex="-1"><a class="header-anchor" href="#运行-javascript"><span>运行 JavaScript</span></a></h3>
<p>可以使用<code v-pre>script</code>方法在浏览器中执行任意 JavaScript 语句：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">script</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'document.documentElement.scrollTop = 0'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">script</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'document.body.scrollTop = 0'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token string single-quoted-string">'document.documentElement.scrollTop = 0'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$output</span> <span class="token operator">=</span> <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">script</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'return window.location.pathname'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="获取截图" tabindex="-1"><a class="header-anchor" href="#获取截图"><span>获取截图</span></a></h3>
<p>你可以使用<code v-pre>screenshot</code>方法来截图并将其指定文件名存储，所有截图都将存放在<code v-pre>tests/Browser/screenshots</code>目录下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">screenshot</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'filename'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>responsiveScreenshots</code>方法可用于在不同断点处截取一系列截图:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">responsiveScreenshots</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'filename'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="控制台输出结果保存到硬盘" tabindex="-1"><a class="header-anchor" href="#控制台输出结果保存到硬盘"><span>控制台输出结果保存到硬盘</span></a></h3>
<p>你可以使用<code v-pre>storeConsoleLog</code>方法将控制台输出指定文件名并写入磁盘，控制台输出默认存放在<code v-pre>tests/Browser/console</code>目录下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">storeConsoleLog</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'filename'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="页面源码保存到硬盘" tabindex="-1"><a class="header-anchor" href="#页面源码保存到硬盘"><span>页面源码保存到硬盘</span></a></h3>
<p>你可以使用<code v-pre>storeSource</code>方法将页面当前源代码指定文件名并写入磁盘，页面源代码默认会存放到<code v-pre>tests/Browser/source</code>目录：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">storeSource</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'filename'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="与元素交互" tabindex="-1"><a class="header-anchor" href="#与元素交互"><span>与元素交互</span></a></h2>
<h3 id="dusk-选择器" tabindex="-1"><a class="header-anchor" href="#dusk-选择器"><span>Dusk 选择器</span></a></h3>
<p>编写 Dusk 测试最困难的部分之一就是选择良好的 CSS 选择器与元素进行交互。 随着时间的推移，前端的更改可能会导致如下所示的 CSS 选择器无法通过测试：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// HTML...</span></span>
<span class="line"></span>
<span class="line"><span class="token operator">&lt;</span>button<span class="token operator">></span>Login<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// Test...</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.login-page .container div > button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Dusk 选择器可以让你专注于编写有效的测试，而不必记住 CSS 选择器。要定义一个选择器，你需要添加一个<code v-pre>dusk</code>属性在 HTML 元素中。然后在选择器前面加上<code v-pre>@</code>用来在 Dusk 测试中操作元素：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// HTML...</span></span>
<span class="line"></span>
<span class="line"><span class="token operator">&lt;</span>button dusk<span class="token operator">=</span><span class="token string double-quoted-string">"login-button"</span><span class="token operator">></span>Login<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// Test...</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@login-button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="文本、值-属性" tabindex="-1"><a class="header-anchor" href="#文本、值-属性"><span>文本、值 &amp; 属性</span></a></h3>
<h4 id="获取-设置值" tabindex="-1"><a class="header-anchor" href="#获取-设置值"><span>获取 &amp; 设置值</span></a></h4>
<p>Dusk 提供了多个方法用于和页面元素的当前显示文本、值和属性进行交互，例如，要获取匹配指定选择器的元素的「值」，使用<code v-pre>value</code>方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 获取值...</span></span>
<span class="line"><span class="token variable">$value</span> <span class="token operator">=</span> <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">value</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 设置值...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">value</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'selector'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'value'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以使用<code v-pre>inputValue</code>方法来获取包含指定字段名称的输入元素的「值」：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$value</span> <span class="token operator">=</span> <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">inputValue</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'field'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="获取文本" tabindex="-1"><a class="header-anchor" href="#获取文本"><span>获取文本</span></a></h4>
<p>该<code v-pre>text</code>方法可以用于获取匹配指定选择器元素文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$text</span> <span class="token operator">=</span> <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="获取属性" tabindex="-1"><a class="header-anchor" href="#获取属性"><span>获取属性</span></a></h4>
<p>最后，该<code v-pre>attribute</code>方法可以用于获取匹配指定选择器元素属性：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$attribute</span> <span class="token operator">=</span> <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">attribute</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'selector'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'value'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="使用表单" tabindex="-1"><a class="header-anchor" href="#使用表单"><span>使用表单</span></a></h3>
<h4 id="输入值" tabindex="-1"><a class="header-anchor" href="#输入值"><span>输入值</span></a></h4>
<p>Dusk 提供了多种方法来与表单和输入元素进行交互。首先，让我们看一个在字段中输入值的示例：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'email'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'taylor@laravel.com'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>注意，尽管该方法在需要时接收，但是我们不需要将 CSS 选择器传递给<code v-pre>type</code>方法。如果没有提供 CSS 选择器，Dusk 会搜索包含指定<code v-pre>name</code>属性的<code v-pre>input</code>或<code v-pre>textarea</code>字段。</p>
<p>要想将文本附加到一个字段之后而且不清除其内容， 你可以使用<code v-pre>append</code>方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'tags'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'foo'</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'tags'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">', bar, baz'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以使用<code v-pre>clear</code>方法清除输入值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'email'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你可以使用<code v-pre>typeSlowly</code>方法指示 Dusk 缓慢键入。 默认情况下，Dusk 在两次按键之间将暂停 100 毫秒。 要自定义按键之间的时间量，你可以将适当的毫秒数作为方法的第二个参数传递：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">typeSlowly</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'mobile'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'+1 (202) 555-5555'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">typeSlowly</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'mobile'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'+1 (202) 555-5555'</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以使用<code v-pre>appendSlowly</code>方法缓慢添加文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'tags'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'foo'</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">appendSlowly</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'tags'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">', bar, baz'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="下拉菜单" tabindex="-1"><a class="header-anchor" href="#下拉菜单"><span>下拉菜单</span></a></h4>
<p>需要在下拉菜单中选择值，你可以使用<code v-pre>select</code>方法。 类似于<code v-pre>type</code>方法， 该<code v-pre>select</code>方法并不是一定要传入 CSS 选择器。 当使用<code v-pre>select</code>方法时，你应该传递选项实际的值而不是它的显示文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'size'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Large'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你也可以通过省略第二个参数来随机选择一个选项：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'size'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>通过将数组作为<code v-pre>select</code>方法的第二个参数，可以指示该方法选择多个选项：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'categories'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'Art'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Music'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="复选框" tabindex="-1"><a class="header-anchor" href="#复选框"><span>复选框</span></a></h4>
<p>使用「check」 复选框时，你可以使用<code v-pre>check</code>方法。 像其他许多与 input 相关的方法，并不是必须传入 CSS 选择器。 如果准确的选择器无法找到的时候，Dusk 会搜索能够与<code v-pre>name</code>属性匹配的复选框：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">check</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'terms'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>该<code v-pre>uncheck</code>方法可用于「取消选中」复选框输入：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">uncheck</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'terms'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="单选按钮" tabindex="-1"><a class="header-anchor" href="#单选按钮"><span>单选按钮</span></a></h4>
<p>使用 「select」中单选按钮选项时，你可以使用<code v-pre>radio</code>这个方法。 像很多其他的与输入相关的方法一样， 它也并不是必须传入 CSS 选择器。如果准确的选择器无法被找到的时候， Dusk 会搜索能够与<code v-pre>name</code>属性或者<code v-pre>value</code>属性相匹配的<code v-pre>radio</code>单选按钮：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">radio</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'size'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'large'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="附件" tabindex="-1"><a class="header-anchor" href="#附件"><span>附件</span></a></h3>
<p>该<code v-pre>attach</code>方法可以附加一个文件到<code v-pre>file</code>input 元素中。 像很多其他的与输入相关的方法一样，他也并不是必须传入 CSS 选择器。如果准确的选择器没有被找到的时候，Dusk 会搜索与<code v-pre>name</code>属性匹配的文件输入框：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">attach</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'photo'</span><span class="token punctuation">,</span> <span class="token constant">__DIR__</span><span class="token operator">.</span><span class="token string single-quoted-string">'/photos/mountains.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p><strong>注意</strong><br>
attach 方法需要使用 PHP<code v-pre>Zip</code>扩展，你的服务器必须安装了此扩展。</p>
</blockquote>
<h3 id="点击按钮" tabindex="-1"><a class="header-anchor" href="#点击按钮"><span>点击按钮</span></a></h3>
<p>可以使用<code v-pre>press</code>方法来单击页面上的按钮元素。该<code v-pre>press</code>方法的第一个参数可以是按钮的显示文本，也可以是 CSS/ Dusk 选择器：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">press</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>提交表单时，许多应用程序在按下表单后会禁用表单的提交按钮，然后在表单提交的 HTTP 请求完成后重新启用该按钮。要按下按钮并等待按钮被重新启用，可以使用<code v-pre>pressAndWaitFor</code>方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 按下按钮并等待最多5秒，它将被启用…</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">pressAndWaitFor</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Save'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 按下按钮并等待最多1秒，它将被启用…</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">pressAndWaitFor</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Save'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="点击链接" tabindex="-1"><a class="header-anchor" href="#点击链接"><span>点击链接</span></a></h3>
<p>要点击链接，可以在浏览器实例下使用<code v-pre>clickLink</code>方法。该<code v-pre>clickLink</code>方法将点击指定文本的链接：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">clickLink</span><span class="token punctuation">(</span><span class="token variable">$linkText</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你可以使用<code v-pre>seeLink</code>方法来确定具有给定显示文本的链接在页面上是否可见：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">seeLink</span><span class="token punctuation">(</span><span class="token variable">$linkText</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// ...</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p><strong>注意</strong><br>
这些方法与 jQuery 交互。 如果页面上没有 jQuery，Dusk 会自动将其注入到页面中，以便在测试期间可用。</p>
</blockquote>
<h3 id="使用键盘" tabindex="-1"><a class="header-anchor" href="#使用键盘"><span>使用键盘</span></a></h3>
<p>该<code v-pre>keys</code>方法让你可以再指定元素中输入比<code v-pre>type</code>方法更加复杂的输入序列。例如，你可以在输入值的同时按下按键。在这个例子中，输入<code v-pre>taylor</code>时，<code v-pre>shift</code>键也同时被按下。当<code v-pre>taylor</code>输入完之后， 将会输入<code v-pre>swift</code>而不会按下任何按键：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'selector'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'{shift}'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'taylor'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'swift'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>keys</code>方法的另一个有价值的用例是向你的应用程序的主要 CSS 选择器发送「键盘快捷键」组合：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.app'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'{command}'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'j'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p><strong>技巧</strong><br>
所有修饰符键如<code v-pre>{command}</code>都包裹在<code v-pre>{}</code>字符中，并且与在 <code v-pre>Facebook\WebDriver\WebDriverKeys</code>类中定义的常量匹配，该类可以<a href="https://github.com/php-webdriver/php-webdriver/blob/master/lib/WebDriverKeys.php" target="_blank" rel="noopener noreferrer">在 GitHub 上找到</a>.</p>
</blockquote>
<h3 id="使用鼠标" tabindex="-1"><a class="header-anchor" href="#使用鼠标"><span>使用鼠标</span></a></h3>
<h4 id="点击元素" tabindex="-1"><a class="header-anchor" href="#点击元素"><span>点击元素</span></a></h4>
<p>该<code v-pre>click</code>方法可用于「点击」与给定选择器匹配的元素：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>该<code v-pre>clickAtXPath</code>方法可用于「单击」与给定 XPath 表达式匹配的元素：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">clickAtXPath</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'//div[@class = "selector"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>该<code v-pre>clickAtPoint</code>方法可用于「点击」相对于浏览器可视区域的给定坐标对上的最高元素：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">clickAtPoint</span><span class="token punctuation">(</span><span class="token variable">$x</span> <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token variable">$y</span> <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>该<code v-pre>doubleClick</code>方法可用于模拟鼠标的双击：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">doubleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>该<code v-pre>rightClick</code>方法可用于模拟鼠标的右击：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">rightClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">rightClick</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>该<code v-pre>clickAndHold</code>方法可用于模拟被单击并按住的鼠标按钮。 随后调用 <code v-pre>releaseMouse</code> 方法将撤消此行为并释放鼠标按钮：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">clickAndHold</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">releaseMouse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="鼠标悬停" tabindex="-1"><a class="header-anchor" href="#鼠标悬停"><span>鼠标悬停</span></a></h4>
<p>该<code v-pre>mouseover</code>方法可用于与给定选择器匹配的元素的鼠标悬停动作：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">mouseover</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="拖放" tabindex="-1"><a class="header-anchor" href="#拖放"><span>拖放</span></a></h4>
<p>该<code v-pre>drag</code>方法用于将与指定选择器匹配的元素拖到其它元素：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">drag</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.from-selector'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'.to-selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>或者，可以在单一方向上拖动元素：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">dragLeft</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token variable">$pixels</span> <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">dragRight</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token variable">$pixels</span> <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">dragUp</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token variable">$pixels</span> <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">dragDown</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token variable">$pixels</span> <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>最后，你可以将元素拖动给定的偏移量：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">dragOffset</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token variable">$x</span> <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token variable">$y</span> <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="javascript-对话框" tabindex="-1"><a class="header-anchor" href="#javascript-对话框"><span>JavaScript 对话框</span></a></h3>
<p>Dusk 提供了各种与 JavaScript 对话框进行交互的方法。例如，你可以使用<code v-pre>waitForDialog</code>方法来等待 JavaScript 对话框的出现。此方法接受一个可选参数，该参数指示等待对话框出现多少秒：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForDialog</span><span class="token punctuation">(</span><span class="token variable">$seconds</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>该<code v-pre>assertDialogOpened</code>方法，断言对话框已经显示，并且其消息与给定值匹配：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertDialogOpened</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Dialog message'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>typeInDialog</code>方法，在打开的 JavaScript 提示对话框中输入给定值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">typeInDialog</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>acceptDialog</code>方法，通过点击确定按钮关闭打开的 JavaScript 对话框：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">acceptDialog</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>dismissDialog</code>方法，通过点击取消按钮关闭打开的 JavaScript 对话框（仅对确认对话框有效）：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">dismissDialog</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="选择器作用范围" tabindex="-1"><a class="header-anchor" href="#选择器作用范围"><span>选择器作用范围</span></a></h3>
<p>有时可能希望在给定的选择器范围内执行多个操作。比如，可能想要断言表格中存在某些文本，然后点击表格中的一个按钮。那么你可以使用<code v-pre>with</code>方法实现此需求。在传递给<code v-pre>with</code>方法的闭包内执行的所有操作都将限于原始选择器：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">with</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.table'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$table</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$table</span><span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">)</span></span>
<span class="line">          <span class="token operator">-></span><span class="token function">clickLink</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Delete'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可能偶尔需要在当前范围之外执行断言。 你可以使用<code v-pre>elsewhere</code>和<code v-pre>elsewhereWhenAvailable</code>方法来完成此操作：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"> <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">with</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.table'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$table</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 当前范围是 `body .table`...</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">elsewhere</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.page-title'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$title</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 当前范围是 `body .page-title`...</span></span>
<span class="line">        <span class="token variable">$title</span><span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">elsewhereWhenAvailable</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.page-title'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$title</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 当前范围是 `body .page-title`...</span></span>
<span class="line">        <span class="token variable">$title</span><span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="等待元素" tabindex="-1"><a class="header-anchor" href="#等待元素"><span>等待元素</span></a></h3>
<p>在测试大面积使用 JavaScript 的应用时，在进行测试之前，通常有必要 「等待」 某些元素或数据可用。Dusk 可轻松实现。使用一系列方法，可以等到页面元素可用，甚至给定的 JavaScript 表达式执行结果为<code v-pre>true</code>。</p>
<h4 id="等待" tabindex="-1"><a class="header-anchor" href="#等待"><span>等待</span></a></h4>
<p>如果需要测试暂停指定的毫秒数， 使用<code v-pre>pause</code>方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如果你只需要在给定条件为<code v-pre>true</code>时暂停测试，请使用<code v-pre>pauseIf</code>方法:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">pauseIf</span><span class="token punctuation">(</span><span class="token class-name static-context">App</span><span class="token operator">::</span><span class="token function">environment</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'production'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>同样地，如果你需要暂停测试，除非给定的条件是<code v-pre>true</code>，你可以使用<code v-pre>pauseUnless</code>方法:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">pauseUnless</span><span class="token punctuation">(</span><span class="token class-name static-context">App</span><span class="token operator">::</span><span class="token function">environment</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'testing'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="等待选择器" tabindex="-1"><a class="header-anchor" href="#等待选择器"><span>等待选择器</span></a></h4>
<p>该<code v-pre>waitFor</code>方法可以用于暂停执行测试，直到页面上与给定 CSS 选择器匹配的元素被显示。默认情况下，将在暂停超过 5 秒后抛出异常。如有必要，可以传递自定义超时时长作为其第二个参数：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 等待选择器不超过 5 秒...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitFor</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 等待选择器不超过 1 秒...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitFor</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你也可以等待选择器显示给定文字：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">//  等待选择器不超过 5 秒包含给定文字...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForTextIn</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">//  等待选择器不超过 1 秒包含给定文字...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForTextIn</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你也可以等待指定选择器从页面消失:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 等待不超过 5 秒 直到选择器消失...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntilMissing</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 等待不超过 1 秒 直到选择器消失...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntilMissing</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>或者，你可以等待与给定选择器匹配的元素被启用或禁用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 最多等待 5 秒钟，直到选择器启用...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntilEnabled</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 最多等待 1 秒钟，直到选择器启用...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntilEnabled</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 最多等待 5 秒钟，直到选择器被禁用...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntilDisabled</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 最多等待 1 秒钟，直到选择器被禁用...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntilDisabled</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="限定作用域范围-可用时" tabindex="-1"><a class="header-anchor" href="#限定作用域范围-可用时"><span>限定作用域范围（可用时）</span></a></h4>
<p>有时，你或许希望等待给定选择器出现，然后与匹配选择器的元素进行交互。例如，你可能希望等到模态窗口可用，然后在模态窗口中点击「确定」按钮。在这种情况下，可以使用<code v-pre>whenAvailable</code>方法。给定回调内的所有要执行的元素操作都将被限定在起始选择器上:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">whenAvailable</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.modal'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$modal</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$modal</span><span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">)</span></span>
<span class="line">          <span class="token operator">-></span><span class="token function">press</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'OK'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="等待文本" tabindex="-1"><a class="header-anchor" href="#等待文本"><span>等待文本</span></a></h4>
<p><code v-pre>waitForText</code>方法可以用于等待页面上给定文字被显示：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 等待指定文本不超过 5 秒...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForText</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 等待指定文本不超过 1 秒...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForText</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以使用<code v-pre>waitUntilMissingText</code>方法来等待，直到显示的文本已从页面中删除为止:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 等待 5 秒删除文本...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntilMissingText</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 等待 1 秒删除文本...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntilMissingText</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello World'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="等待链接" tabindex="-1"><a class="header-anchor" href="#等待链接"><span>等待链接</span></a></h4>
<p><code v-pre>waitForLink</code>方法用于等待给定链接文字在页面上显示:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 等待链接 5 秒...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForLink</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Create'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 等待链接 1 秒...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForLink</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Create'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="等待输入" tabindex="-1"><a class="header-anchor" href="#等待输入"><span>等待输入</span></a></h4>
<p><code v-pre>waitForInput</code>方法可用于等待，直到给定的输入字段在页面上可见:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 等待 5 秒的输入…</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForInput</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 等待 1 秒的输入…</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForInput</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="等待页面跳转" tabindex="-1"><a class="header-anchor" href="#等待页面跳转"><span>等待页面跳转</span></a></h4>
<p>当给出类似<code v-pre>$browser-&gt;assertPathIs('/home')</code>的路径断言时，如果<code v-pre>window.location.pathname</code>被异步更新，断言就会失败。可以使用<code v-pre>waitForLocation</code>方法等待页面跳转到给定路径：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForLocation</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/secret'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>waitForLocation</code>方法还可用于等待当前窗口位置成为完全限定的 URL：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForLocation</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'https://example.com/path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>还可以使用<a href="https://learnku.com/docs/laravel/10.x/routing#named-routes" target="_blank" rel="noopener noreferrer">被命名的路由</a>等待跳转：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForRoute</span><span class="token punctuation">(</span><span class="token variable">$routeName</span><span class="token punctuation">,</span> <span class="token variable">$parameters</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="等待页面重新加载" tabindex="-1"><a class="header-anchor" href="#等待页面重新加载"><span>等待页面重新加载</span></a></h4>
<p>如果要在页面重新加载后断言，可以使用<code v-pre>waitForReload</code>方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForReload</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">press</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Submit'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Success!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>由于需要等待页面重新加载通常发生在单击按钮之后，为了方便起见，你可以使用<code v-pre>clickAndWaitForReload</code>方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">clickAndWaitForReload</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'something'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="等待-javascript-表达式" tabindex="-1"><a class="header-anchor" href="#等待-javascript-表达式"><span>等待 JavaScript 表达式</span></a></h4>
<p>有时候会希望暂停测试的执行，直到给定的 JavaScript 表达式执行结果为<code v-pre>true</code>。可以使用<code v-pre>waitUntil</code>方法轻松地达成此目的。 通过这个方法执行表达式，不需要包含<code v-pre>return</code>关键字或者结束分号：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 等待表达式为 true 5 秒时间...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntil</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'App.data.servers.length > 0'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 等待表达式为 true 1 秒时间...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntil</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'App.data.servers.length > 0'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="等待-vue-表达式" tabindex="-1"><a class="header-anchor" href="#等待-vue-表达式"><span>等待 Vue 表达式</span></a></h4>
<p><code v-pre>waitUntilVue</code>和<code v-pre>waitUntilVueIsNot</code>方法可以一直等待，直到 <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue 组件</a> 的属性包含给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 一直等待，直到组件属性包含给定的值...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntilVue</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'user.name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Taylor'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'@user'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 一直等待，直到组件属性不包含给定的值...</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUntilVueIsNot</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'user.name'</span><span class="token punctuation">,</span> <span class="token constant">null</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'@user'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="等待-javascript-事件" tabindex="-1"><a class="header-anchor" href="#等待-javascript-事件"><span>等待 JavaScript 事件</span></a></h4>
<p><code v-pre>waitForEvent</code>方法可用于暂停测试的执行，直到 JavaScript 事件发生:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForEvent</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'load'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>事件监听器附加到当前作用域，默认情况下是<code v-pre>body</code>元素。当使用范围选择器时，事件监听器将被附加到匹配的元素上:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">with</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'iframe'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$iframe</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 等待 iframe 的加载事件…</span></span>
<span class="line">    <span class="token variable">$iframe</span><span class="token operator">-></span><span class="token function">waitForEvent</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'load'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你也可以提供一个选择器作为<code v-pre>waitForEvent</code>方法的第二个参数，将事件监听器附加到特定的元素上:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForEvent</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'load'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你也可以等待<code v-pre>document</code>和<code v-pre>window</code>对象上的事件:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// 等待文档被滚动…</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForEvent</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'scroll'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'document'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 等待 5 秒，直到窗口大小被调整…</span></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitForEvent</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'resize'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'window'</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="等待回调" tabindex="-1"><a class="header-anchor" href="#等待回调"><span>等待回调</span></a></h4>
<p>Dusk 中的许多 「wait」 方法都依赖于底层方法 waitUsing。你可以直接用这个方法去等待一个回调函数返回<code v-pre>waitUsing</code>。你可以直接用这个方法去等待一个回调函数返回<code v-pre>true</code>。该<code v-pre>waitUsing</code>方法接收一个最大的等待秒数，闭包执行间隔时间，闭包，以及一个可选的失败信息：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">waitUsing</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token variable">$something</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token variable">$something</span><span class="token operator">-></span><span class="token function">isReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string double-quoted-string">"有些东西没有及时准备好。"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="滚动元素到视图中" tabindex="-1"><a class="header-anchor" href="#滚动元素到视图中"><span>滚动元素到视图中</span></a></h3>
<p>有时你可能无法单击某个元素，因为该元素在浏览器的可见区域之外。该<code v-pre>scrollIntoView</code>方法可以将元素滚动到浏览器可视窗口内：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">scrollIntoView</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'.selector'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="可用的断言" tabindex="-1"><a class="header-anchor" href="#可用的断言"><span>可用的断言</span></a></h2>
<p>Dusk 提供了各种你可以对应用使用的断言。所有可用的断言罗列如下：</p>
<h4 id="asserttitle" tabindex="-1"><a class="header-anchor" href="#asserttitle"><span>assertTitle</span></a></h4>
<p>断言页面标题为给定文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertTitle</span><span class="token punctuation">(</span><span class="token variable">$title</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="asserttitlecontains" tabindex="-1"><a class="header-anchor" href="#asserttitlecontains"><span>assertTitleContains</span></a></h4>
<p>断言页面标题包含给定文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertTitleContains</span><span class="token punctuation">(</span><span class="token variable">$title</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="asserturlis" tabindex="-1"><a class="header-anchor" href="#asserturlis"><span>assertUrlIs</span></a></h4>
<p>断言当前的 URL（不包含 query string）是给定的字符串：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertUrlIs</span><span class="token punctuation">(</span><span class="token variable">$url</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertschemeis" tabindex="-1"><a class="header-anchor" href="#assertschemeis"><span>assertSchemeIs</span></a></h4>
<p>断言当前的 URL scheme 是给定的 scheme：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSchemeIs</span><span class="token punctuation">(</span><span class="token variable">$scheme</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertschemeisnot" tabindex="-1"><a class="header-anchor" href="#assertschemeisnot"><span>assertSchemeIsNot</span></a></h4>
<p>断言当前的 URL scheme 不是给定的 scheme：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSchemeIsNot</span><span class="token punctuation">(</span><span class="token variable">$scheme</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="asserthostis" tabindex="-1"><a class="header-anchor" href="#asserthostis"><span>assertHostIs</span></a></h4>
<p>断言当前的 URL host 是给定的 host：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertHostIs</span><span class="token punctuation">(</span><span class="token variable">$host</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="asserthostisnot" tabindex="-1"><a class="header-anchor" href="#asserthostisnot"><span>assertHostIsNot</span></a></h4>
<p>断言当前的 URL host 不是给定的 host：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertHostIsNot</span><span class="token punctuation">(</span><span class="token variable">$host</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertportis" tabindex="-1"><a class="header-anchor" href="#assertportis"><span>assertPortIs</span></a></h4>
<p>断言当前的 URL 端口是给定的端口：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPortIs</span><span class="token punctuation">(</span><span class="token variable">$port</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertportisnot" tabindex="-1"><a class="header-anchor" href="#assertportisnot"><span>assertPortIsNot</span></a></h4>
<p>断言当前的 URL 端口不是给定的端口：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPortIsNot</span><span class="token punctuation">(</span><span class="token variable">$port</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertpathbeginswith" tabindex="-1"><a class="header-anchor" href="#assertpathbeginswith"><span>assertPathBeginsWith</span></a></h4>
<p>断言当前的 URL 路径以给定的路径开始：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPathBeginsWith</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/home'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertpathis" tabindex="-1"><a class="header-anchor" href="#assertpathis"><span>assertPathIs</span></a></h4>
<p>断言当前的路径是给定的路径：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPathIs</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/home'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertpathisnot" tabindex="-1"><a class="header-anchor" href="#assertpathisnot"><span>assertPathIsNot</span></a></h4>
<p>断言当前的路径不是给定的路径：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPathIsNot</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/home'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertrouteis" tabindex="-1"><a class="header-anchor" href="#assertrouteis"><span>assertRouteIs</span></a></h4>
<p>断言给定的 URL 是给定的<a href="https://learnku.com/docs/laravel/10.x/routing#named-routes" target="_blank" rel="noopener noreferrer">命名路由</a>的 URL:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertRouteIs</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$parameters</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertquerystringhas" tabindex="-1"><a class="header-anchor" href="#assertquerystringhas"><span>assertQueryStringHas</span></a></h4>
<p>断言给定的查询字符串参数存在：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertQueryStringHas</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>断言给定的查询字符串参数存在并且具有给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertQueryStringHas</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertquerystringmissing" tabindex="-1"><a class="header-anchor" href="#assertquerystringmissing"><span>assertQueryStringMissing</span></a></h4>
<p>断言缺少给定的查询字符串参数：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertQueryStringMissing</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertfragmentis" tabindex="-1"><a class="header-anchor" href="#assertfragmentis"><span>assertFragmentIs</span></a></h4>
<p>断言 URL 的当前哈希片段与给定的片段匹配：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertFragmentIs</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'anchor'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertfragmentbeginswith" tabindex="-1"><a class="header-anchor" href="#assertfragmentbeginswith"><span>assertFragmentBeginsWith</span></a></h4>
<p>断言 URL 的当前哈希片段以给定片段开头：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertFragmentBeginsWith</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'anchor'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertfragmentisnot" tabindex="-1"><a class="header-anchor" href="#assertfragmentisnot"><span>assertFragmentIsNot</span></a></h4>
<p>断言 URL 的当前哈希片段与给定的片段不匹配：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertFragmentIsNot</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'anchor'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="asserthascookie" tabindex="-1"><a class="header-anchor" href="#asserthascookie"><span>assertHasCookie</span></a></h4>
<p>断言给定的加密 cookie 存在:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertHasCookie</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="asserthasplaincookie" tabindex="-1"><a class="header-anchor" href="#asserthasplaincookie"><span>assertHasPlainCookie</span></a></h4>
<p>断言给定的未加密 cookie 存在：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertHasPlainCookie</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertcookiemissing" tabindex="-1"><a class="header-anchor" href="#assertcookiemissing"><span>assertCookieMissing</span></a></h4>
<p>断言给定的加密 cookie 不存在：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertCookieMissing</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertplaincookiemissing" tabindex="-1"><a class="header-anchor" href="#assertplaincookiemissing"><span>assertPlainCookieMissing</span></a></h4>
<p>断言给定的未加密 cookie 不存在：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPlainCookieMissing</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertcookievalue" tabindex="-1"><a class="header-anchor" href="#assertcookievalue"><span>assertCookieValue</span></a></h4>
<p>断言加密的 cookie 具有给定值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertCookieValue</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertplaincookievalue" tabindex="-1"><a class="header-anchor" href="#assertplaincookievalue"><span>assertPlainCookieValue</span></a></h4>
<p>断言未加密的 cookie 具有给定值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPlainCookieValue</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertsee" tabindex="-1"><a class="header-anchor" href="#assertsee"><span>assertSee</span></a></h4>
<p>断言在页面中有给定的文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token variable">$text</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertdontsee" tabindex="-1"><a class="header-anchor" href="#assertdontsee"><span>assertDontSee</span></a></h4>
<p>断言在页面中没有给定的文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertDontSee</span><span class="token punctuation">(</span><span class="token variable">$text</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertseein" tabindex="-1"><a class="header-anchor" href="#assertseein"><span>assertSeeIn</span></a></h4>
<p>断言在选择器中有给定的文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSeeIn</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">,</span> <span class="token variable">$text</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertdontseein" tabindex="-1"><a class="header-anchor" href="#assertdontseein"><span>assertDontSeeIn</span></a></h4>
<p>断言在选择器中不存在给定的文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertDontSeeIn</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">,</span> <span class="token variable">$text</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertseeanythingin" tabindex="-1"><a class="header-anchor" href="#assertseeanythingin"><span>assertSeeAnythingIn</span></a></h4>
<p>断言在选择器中存在任意的文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSeeAnythingIn</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>断言在选择器中不存在文本：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSeeNothingIn</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertscript" tabindex="-1"><a class="header-anchor" href="#assertscript"><span>assertScript</span></a></h4>
<p>断言给定的 JavaScript 表达式结果为给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertScript</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'window.isLoaded'</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">assertScript</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'document.readyState'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'complete'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="assertsourcehas" tabindex="-1"><a class="header-anchor" href="#assertsourcehas"><span>assertSourceHas</span></a></h4>
<p>断言在页面中存在给定的源码：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSourceHas</span><span class="token punctuation">(</span><span class="token variable">$code</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertsourcemissing" tabindex="-1"><a class="header-anchor" href="#assertsourcemissing"><span>assertSourceMissing</span></a></h4>
<p>断言页面中没有给定的源码：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSourceMissing</span><span class="token punctuation">(</span><span class="token variable">$code</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertseelink" tabindex="-1"><a class="header-anchor" href="#assertseelink"><span>assertSeeLink</span></a></h4>
<p>断言在页面中存在指定的链接：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSeeLink</span><span class="token punctuation">(</span><span class="token variable">$linkText</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertdontseelink" tabindex="-1"><a class="header-anchor" href="#assertdontseelink"><span>assertDontSeeLink</span></a></h4>
<p>断言页面中没有指定的链接：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertDontSeeLink</span><span class="token punctuation">(</span><span class="token variable">$linkText</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertinputvalue" tabindex="-1"><a class="header-anchor" href="#assertinputvalue"><span>assertInputValue</span></a></h4>
<p>断言输入框（input）有给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertInputValue</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertinputvalueisnot" tabindex="-1"><a class="header-anchor" href="#assertinputvalueisnot"><span>assertInputValueIsNot</span></a></h4>
<p>断言输入框没有给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertInputValueIsNot</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertchecked" tabindex="-1"><a class="header-anchor" href="#assertchecked"><span>assertChecked</span></a></h4>
<p>断言复选框（checkbox）被选中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertChecked</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertnotchecked" tabindex="-1"><a class="header-anchor" href="#assertnotchecked"><span>assertNotChecked</span></a></h4>
<p>断言复选框没有被选中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertNotChecked</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertradioselected" tabindex="-1"><a class="header-anchor" href="#assertradioselected"><span>assertRadioSelected</span></a></h4>
<p>断言单选框（radio）被选中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertRadioSelected</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertradionotselected" tabindex="-1"><a class="header-anchor" href="#assertradionotselected"><span>assertRadioNotSelected</span></a></h4>
<p>断言单选框（radio）没有被选中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertRadioNotSelected</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertselected" tabindex="-1"><a class="header-anchor" href="#assertselected"><span>assertSelected</span></a></h4>
<p>断言下拉框有给定的值:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSelected</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>断言下拉框没有给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertNotSelected</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertselecthasoptions" tabindex="-1"><a class="header-anchor" href="#assertselecthasoptions"><span>assertSelectHasOptions</span></a></h4>
<p>断言给定的数组值是可选的：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSelectHasOptions</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$values</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertselectmissingoptions" tabindex="-1"><a class="header-anchor" href="#assertselectmissingoptions"><span>assertSelectMissingOptions</span></a></h4>
<p>断言给定的数组值是不可选的：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSelectMissingOptions</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$values</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertselecthasoption" tabindex="-1"><a class="header-anchor" href="#assertselecthasoption"><span>assertSelectHasOption</span></a></h4>
<p>断言给定的值在给定的地方是可供选择的：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSelectHasOption</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertselectmissingoption" tabindex="-1"><a class="header-anchor" href="#assertselectmissingoption"><span>assertSelectMissingOption</span></a></h4>
<p>断言给定的值不可选：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertSelectMissingOption</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertvalue" tabindex="-1"><a class="header-anchor" href="#assertvalue"><span>assertValue</span></a></h4>
<p>断言选择器范围内的元素存在指定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertValue</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertvalueisnot" tabindex="-1"><a class="header-anchor" href="#assertvalueisnot"><span>assertValueIsNot</span></a></h4>
<p>断言选择器范围内的元素不存在指定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertValueIsNot</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertattribute" tabindex="-1"><a class="header-anchor" href="#assertattribute"><span>assertAttribute</span></a></h4>
<p>断言与给定选择器匹配的元素在提供的属性中具有给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertAttribute</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">,</span> <span class="token variable">$attribute</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertattributecontains" tabindex="-1"><a class="header-anchor" href="#assertattributecontains"><span>assertAttributeContains</span></a></h4>
<p>断言匹配给定选择器的元素在提供的属性中包含给定值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertAttributeContains</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">,</span> <span class="token variable">$attribute</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertariaattribute" tabindex="-1"><a class="header-anchor" href="#assertariaattribute"><span>assertAriaAttribute</span></a></h4>
<p>断言与给定选择器匹配的元素在给定的 aria 属性中具有给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertAriaAttribute</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">,</span> <span class="token variable">$attribute</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>例如，给定标记<code v-pre>&lt;button aria-label=&quot;Add&quot;&gt;&lt;/button&gt;</code>，你可以像这样声明<code v-pre>aria-label</code>属性：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertAriaAttribute</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'button'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'label'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Add'</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertdataattribute" tabindex="-1"><a class="header-anchor" href="#assertdataattribute"><span>assertDataAttribute</span></a></h4>
<p>断言与给定选择器匹配的元素在提供的 data 属性中具有给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertDataAttribute</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">,</span> <span class="token variable">$attribute</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>例如，给定标记<code v-pre>&lt;tr id=&quot;row-1&quot; data-content=&quot;attendees&quot;&gt;&lt;/tr&gt;</code>，你可以像这样断言<code v-pre>data-label</code>属性：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertDataAttribute</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'#row-1'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'content'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'attendees'</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertvisible" tabindex="-1"><a class="header-anchor" href="#assertvisible"><span>assertVisible</span></a></h4>
<p>断言匹配给定选择器的元素可见:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertVisible</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertpresent" tabindex="-1"><a class="header-anchor" href="#assertpresent"><span>assertPresent</span></a></h4>
<p>断言匹配给定选择器的元素存在：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPresent</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertnotpresent" tabindex="-1"><a class="header-anchor" href="#assertnotpresent"><span>assertNotPresent</span></a></h4>
<p>断言源中不存在与给定选择器匹配的元素：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertNotPresent</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertmissing" tabindex="-1"><a class="header-anchor" href="#assertmissing"><span>assertMissing</span></a></h4>
<p>断言匹配给定选择器的元素不可见：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertMissing</span><span class="token punctuation">(</span><span class="token variable">$selector</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertinputpresent" tabindex="-1"><a class="header-anchor" href="#assertinputpresent"><span>assertInputPresent</span></a></h4>
<p>断言具有给定名称的输入存在：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertInputPresent</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertinputmissing" tabindex="-1"><a class="header-anchor" href="#assertinputmissing"><span>assertInputMissing</span></a></h4>
<p>断言源中不存在具有给定名称的输入：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertInputMissing</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertdialogopened" tabindex="-1"><a class="header-anchor" href="#assertdialogopened"><span>assertDialogOpened</span></a></h4>
<p>断言已打开带有给定消息的 JavaScript 对话框：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertDialogOpened</span><span class="token punctuation">(</span><span class="token variable">$message</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertenabled" tabindex="-1"><a class="header-anchor" href="#assertenabled"><span>assertEnabled</span></a></h4>
<p>断言给定的字段已启用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertEnabled</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertdisabled" tabindex="-1"><a class="header-anchor" href="#assertdisabled"><span>assertDisabled</span></a></h4>
<p>断言给定的字段被禁用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertDisabled</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertbuttonenabled" tabindex="-1"><a class="header-anchor" href="#assertbuttonenabled"><span>assertButtonEnabled</span></a></h4>
<p>断言给定的按钮已启用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertButtonEnabled</span><span class="token punctuation">(</span><span class="token variable">$button</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertbuttondisabled" tabindex="-1"><a class="header-anchor" href="#assertbuttondisabled"><span>assertButtonDisabled</span></a></h4>
<p>断言给定的按钮被禁用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertButtonDisabled</span><span class="token punctuation">(</span><span class="token variable">$button</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertfocused" tabindex="-1"><a class="header-anchor" href="#assertfocused"><span>assertFocused</span></a></h4>
<p>断言给定的字段是焦点：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertFocused</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertnotfocused" tabindex="-1"><a class="header-anchor" href="#assertnotfocused"><span>assertNotFocused</span></a></h4>
<p>断言给定字段未聚焦：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertNotFocused</span><span class="token punctuation">(</span><span class="token variable">$field</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertauthenticated" tabindex="-1"><a class="header-anchor" href="#assertauthenticated"><span>assertAuthenticated</span></a></h4>
<p>断言用户已通过身份验证：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertAuthenticated</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertguest" tabindex="-1"><a class="header-anchor" href="#assertguest"><span>assertGuest</span></a></h4>
<p>断言用户未通过身份验证：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertGuest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertauthenticatedas" tabindex="-1"><a class="header-anchor" href="#assertauthenticatedas"><span>assertAuthenticatedAs</span></a></h4>
<p>断言用户已作为给定用户进行身份验证：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertAuthenticatedAs</span><span class="token punctuation">(</span><span class="token variable">$user</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertvue" tabindex="-1"><a class="header-anchor" href="#assertvue"><span>assertVue</span></a></h4>
<p>Dusk 甚至允许你对 <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue 组件</a>数据的状态进行断言。例如，假设你的应用程序包含以下 Vue 组件：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token comment">// HTML...</span></span>
<span class="line"></span>
<span class="line"><span class="token operator">&lt;</span>profile dusk<span class="token operator">=</span><span class="token string double-quoted-string">"profile-component"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>profile<span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 组件定义...</span></span>
<span class="line"></span>
<span class="line">Vue<span class="token operator">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'profile'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    template<span class="token punctuation">:</span> <span class="token string single-quoted-string">'&lt;div>{{ user.name }}&lt;/div>'</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">    <span class="token argument-name">data</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
<span class="line">            user<span class="token punctuation">:</span> <span class="token punctuation">{</span></span>
<span class="line">                name<span class="token punctuation">:</span> <span class="token string single-quoted-string">'Taylor'</span></span>
<span class="line">            <span class="token punctuation">}</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以像这样断言 Vue 组件的状态：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 一个基本的 Vue 测试示例</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">void</span></span></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">testVue</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">browse</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">assertVue</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'user.name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Taylor'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'@profile-component'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="assertvueisnot" tabindex="-1"><a class="header-anchor" href="#assertvueisnot"><span>assertVueIsNot</span></a></h4>
<p>断言 Vue 组件数据的属性不匹配给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertVueIsNot</span><span class="token punctuation">(</span><span class="token variable">$property</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">,</span> <span class="token variable">$componentSelector</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertvuecontains" tabindex="-1"><a class="header-anchor" href="#assertvuecontains"><span>assertVueContains</span></a></h4>
<p>断言 Vue 组件数据的属性是一个数组，并包含给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertVueContains</span><span class="token punctuation">(</span><span class="token variable">$property</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">,</span> <span class="token variable">$componentSelector</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="assertvuedoesnotcontain" tabindex="-1"><a class="header-anchor" href="#assertvuedoesnotcontain"><span>assertVueDoesNotContain</span></a></h4>
<p>断言 Vue 组件数据的属性是一个数组，且不包含给定的值：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertVueDoesNotContain</span><span class="token punctuation">(</span><span class="token variable">$property</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">,</span> <span class="token variable">$componentSelector</span> <span class="token operator">=</span> <span class="token constant">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="pages" tabindex="-1"><a class="header-anchor" href="#pages"><span>Pages</span></a></h2>
<p>有时，测试需要按顺序执行几个复杂的操作。这会使测试代码更难阅读和理解。 Dusk Pages 允许你定义语义化的操作，然后可以通过单一方法在给定页面上执行这些操作。Pages 还可以为应用或单个页面定义通用选择器的快捷方式。</p>
<h3 id="生成-pages" tabindex="-1"><a class="header-anchor" href="#生成-pages"><span>生成 Pages</span></a></h3>
<p><code v-pre>dusk:page</code>Artisan 命令可以生成页面对象。所有的页面对象都位于<code v-pre>tests/Browser/Pages</code>目录：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">php artisan dusk<span class="token punctuation">:</span>page Login</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="配置-pages" tabindex="-1"><a class="header-anchor" href="#配置-pages"><span>配置 Pages</span></a></h3>
<p>默认情况下，页面具有三种方法：<code v-pre>url</code>、<code v-pre>assert</code>和<code v-pre>elements</code>。我们现在将讨论 <code v-pre>url</code>和<code v-pre>assert</code>方法。<code v-pre>elements</code>方法将<a href="#shorthand-selectors">在下面更详细地讨论</a>。</p>
<h4 id="url-方法" tabindex="-1"><a class="header-anchor" href="#url-方法"><span><code v-pre>url</code> 方法</span></a></h4>
<p><code v-pre>url</code>方法应该返回表示页面 URL 的路径。 Dusk 将会在浏览器中使用这个 URL 来导航到具体页面：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 获取页面的 URL。</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">string</span></span></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">url</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token string single-quoted-string">'/login'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="assert-方法" tabindex="-1"><a class="header-anchor" href="#assert-方法"><span><code v-pre>assert</code> 方法</span></a></h4>
<p><code v-pre>assert</code>方法可以作出任何断言来验证浏览器是否在指定页面上。实际上没有必要在这个方法中放置任何东西；但是，你可以按自己的需求来做出这些断言。导航到页面时，这些断言将自动运行：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 断言浏览器当前处于指定页面。</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">assert</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertPathIs</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">url</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="导航至页面" tabindex="-1"><a class="header-anchor" href="#导航至页面"><span>导航至页面</span></a></h3>
<p>一旦页面定义好之后，你可以使用<code v-pre>visit</code>方法导航至页面：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser<span class="token punctuation">\</span>Pages<span class="token punctuation">\</span>Login</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Login</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>有时你可能已经在给定的页面上，需要将页面的选择器和方法「加载」到当前的测试上下文中。 这在通过按钮重定向到指定页面而没有明确导航到该页面时很常见。 在这种情况下，你可以使用<code v-pre>on</code>方法加载页面：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser<span class="token punctuation">\</span>Pages<span class="token punctuation">\</span>CreatePlaylist</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/dashboard'</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">clickLink</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Create Playlist'</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">on</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">CreatePlaylist</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@create'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="选择器简写" tabindex="-1"><a class="header-anchor" href="#选择器简写"><span>选择器简写</span></a></h3>
<p>该<code v-pre>elements</code>方法允许你为页面中的任何 CSS 选择器定义简单易记的简写。例如，让我们为应用登录页中的 email 输入框定义一个简写：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 获取页面元素的简写。</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">array</span></span>&lt;string, string></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">elements</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">array</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token string single-quoted-string">'@email'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'input[name=email]'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>一旦定义了简写，你就可以用这个简写来代替之前在页面中使用的完整 CSS 选择器：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@email'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'taylor@laravel.com'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h4 id="全局的选择器简写" tabindex="-1"><a class="header-anchor" href="#全局的选择器简写"><span>全局的选择器简写</span></a></h4>
<p>安装 Dusk 之后，<code v-pre>Page</code>基类存放在你的<code v-pre>tests/Browser/Pages</code>目录。该类中包含一个<code v-pre>siteElements</code>方法，这个方法可以用来定义全局的选择器简写，这样在你应用中每个页面都可以使用这些全局选择器简写了：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * 获取站点全局的选择器简写。</span>
<span class="line"> *</span>
<span class="line"> * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">array</span></span>&lt;string, string></span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">function</span> <span class="token function-definition function">siteElements</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">array</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token string single-quoted-string">'@element'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'#selector'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="页面方法" tabindex="-1"><a class="header-anchor" href="#页面方法"><span>页面方法</span></a></h3>
<p>除了页面中已经定义的默认方法之外，你还可以定义在整个测试过程中会使用到的其他方法。例如，假设我们正在开发一个音乐管理应用，在应用中每个页面都可能需要一个公共的方法来创建播放列表，而不是在每一个测试类中都重写一遍创建播放列表的逻辑，这时候你可以在你的页面类中定义一个<code v-pre>createPlaylist</code>方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser<span class="token punctuation">\</span>Pages</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">Dashboard</span> <span class="token keyword">extends</span> <span class="token class-name">Page</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 其他页面方法...</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 创建一个新的播放列表。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">createPlaylist</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">,</span> <span class="token keyword type-hint">string</span> <span class="token variable">$name</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">type</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token variable">$name</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">check</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'share'</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">press</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Create Playlist'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>方法被定义之后，你可以在任何使用到该页的测试中使用它了。浏览器实例会自动作为第一个参数传递给自定义页面方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser<span class="token punctuation">\</span>Pages<span class="token punctuation">\</span>Dashboard</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Dashboard</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">createPlaylist</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'My Playlist'</span><span class="token punctuation">)</span></span>
<span class="line">        <span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'My Playlist'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="组件" tabindex="-1"><a class="header-anchor" href="#组件"><span>组件</span></a></h2>
<p>组件类似于 Dusk 的 「页面对象」，不过它更多的是贯穿整个应用程序中频繁重用的 UI 和功能片断，比如说导航条或信息通知弹窗。因此，组件并不会绑定于某个明确的 URL。</p>
<h3 id="生成组件" tabindex="-1"><a class="header-anchor" href="#生成组件"><span>生成组件</span></a></h3>
<p>使用<code v-pre>dusk:component</code>Artisan 命令即可生成组件。新生成的组件位于<code v-pre>tests/Browser/Components</code>目录下：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">php artisan dusk<span class="token punctuation">:</span>component DatePicker</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如上所示，这是生成一个「日期选择器」（date picker）组件的示例，这个组件可能会贯穿使用在你应用程序的许多页面中。在整个测试套件的大量测试页面中，手动编写日期选择的浏览器自动化逻辑会非常麻烦。 更方便的替代办法是，定义一个表示日期选择器的 Dusk 组件，然后把自动化逻辑封装在该组件内：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser<span class="token punctuation">\</span>Components</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Component</span> <span class="token keyword">as</span> BaseComponent<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">DatePicker</span> <span class="token keyword">extends</span> <span class="token class-name">BaseComponent</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 获取组件的 root selector。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">selector</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">string</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token string single-quoted-string">'.date-picker'</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 断言浏览器包含组件。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">assert</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">assertVisible</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-></span><span class="token function">selector</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 读取组件的元素简写。</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@return</span> <span class="token class-name"><span class="token keyword">array</span></span>&lt;string, string></span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">elements</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">array</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'@date-field'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'input.datepicker-input'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'@year-list'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'div > div.datepicker-years'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'@month-list'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'div > div.datepicker-months'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string single-quoted-string">'@day-list'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'div > div.datepicker-days'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 选择给定日期。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">selectDate</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">,</span> <span class="token keyword type-hint">int</span> <span class="token variable">$year</span><span class="token punctuation">,</span> <span class="token keyword type-hint">int</span> <span class="token variable">$month</span><span class="token punctuation">,</span> <span class="token keyword type-hint">int</span> <span class="token variable">$day</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@date-field'</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">within</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@year-list'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token variable">$year</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token variable">$year</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">within</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@month-list'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token variable">$month</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token variable">$month</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">within</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'@day-list'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token keyword">use</span> <span class="token punctuation">(</span><span class="token variable">$day</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                    <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">click</span><span class="token punctuation">(</span><span class="token variable">$day</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="使用组件" tabindex="-1"><a class="header-anchor" href="#使用组件"><span>使用组件</span></a></h3>
<p>当组件被定义了之后，我们就可以轻松的在任意测试页面通过日期选择器选择一个日期。并且，如果选择日期的逻辑发生了变化，我们只需要更新组件即可：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Foundation<span class="token punctuation">\</span>Testing<span class="token punctuation">\</span>DatabaseMigrations</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Laravel<span class="token punctuation">\</span>Dusk<span class="token punctuation">\</span>Browser</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>Browser<span class="token punctuation">\</span>Components<span class="token punctuation">\</span>DatePicker</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>DuskTestCase</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">ExampleTest</span> <span class="token keyword">extends</span> <span class="token class-name">DuskTestCase</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 一个基础的组件测试用例.</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">test_basic_example</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">browse</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">within</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">DatePicker</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">Browser</span> <span class="token variable">$browser</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                        <span class="token variable">$browser</span><span class="token operator">-></span><span class="token function">selectDate</span><span class="token punctuation">(</span><span class="token number">2019</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">                    <span class="token operator">-></span><span class="token function">assertSee</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'January'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="持续集成" tabindex="-1"><a class="header-anchor" href="#持续集成"><span>持续集成</span></a></h2>
<blockquote>
<p><strong>注意</strong><br>
大多数 Dusk 持续集成配置都希望你的 Laravel 应用程序使用端口 8000 上的内置 PHP 开发服务器提供服务。因此，你应该确保持续集成环境有一个值为 <code v-pre>http://127.0.0.1:8000</code> 的 <code v-pre>APP_URL</code> 环境变量。</p>
</blockquote>
<h3 id="heroku-ci" tabindex="-1"><a class="header-anchor" href="#heroku-ci"><span>Heroku CI</span></a></h3>
<p>要在 <a href="https://www.heroku.com/continuous-integration" target="_blank" rel="noopener noreferrer">Heroku CI</a> 中运行 Dusk 测试，请将以下 Google Chrome buildpack 和 脚本添加到 Heroku 的 <code v-pre>app.json</code> 文件中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token punctuation">{</span></span>
<span class="line">  <span class="token string double-quoted-string">"environments"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token string double-quoted-string">"test"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span></span>
<span class="line">      <span class="token string double-quoted-string">"buildpacks"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token punctuation">{</span> <span class="token string double-quoted-string">"url"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"heroku/php"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">{</span> <span class="token string double-quoted-string">"url"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"https://github.com/heroku/heroku-buildpack-google-chrome"</span> <span class="token punctuation">}</span></span>
<span class="line">      <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">      <span class="token string double-quoted-string">"scripts"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token string double-quoted-string">"test-setup"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"cp .env.testing .env"</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token string double-quoted-string">"test"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"nohup bash -c './vendor/laravel/dusk/bin/chromedriver-linux > /dev/null 2>&amp;1 &amp;' &amp;&amp; nohup bash -c 'php artisan serve --no-reload > /dev/null 2>&amp;1 &amp;' &amp;&amp; php artisan dusk"</span></span>
<span class="line">      <span class="token punctuation">}</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line">  <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="travis-ci" tabindex="-1"><a class="header-anchor" href="#travis-ci"><span>Travis CI</span></a></h3>
<p>要在 <a href="https://travis-ci.org/" target="_blank" rel="noopener noreferrer">Travis CI</a> 运行 Dusk 测试，可以使用下面这个 <code v-pre>.travis.yml</code> 配置。由于 Travis CI 不是一个图形化的环境，我们还需要一些额外的步骤以便启动 Chrome 浏览器。此外，我们将会使用 <code v-pre>php artisan serve</code> 来启动 PHP 自带的 Web 服务器：</p>
<div class="language-yaml line-numbers-mode" data-highlighter="prismjs" data-ext="yml" data-title="yml"><pre v-pre class="language-yaml"><code><span class="line"><span class="token key atrule">language</span><span class="token punctuation">:</span> php</span>
<span class="line"></span>
<span class="line"><span class="token key atrule">php</span><span class="token punctuation">:</span></span>
<span class="line">  <span class="token punctuation">-</span> <span class="token number">7.3</span></span>
<span class="line"></span>
<span class="line"><span class="token key atrule">addons</span><span class="token punctuation">:</span></span>
<span class="line">  <span class="token key atrule">chrome</span><span class="token punctuation">:</span> stable</span>
<span class="line"></span>
<span class="line"><span class="token key atrule">install</span><span class="token punctuation">:</span></span>
<span class="line">  <span class="token punctuation">-</span> cp .env.testing .env</span>
<span class="line">  <span class="token punctuation">-</span> travis_retry composer install <span class="token punctuation">-</span><span class="token punctuation">-</span>no<span class="token punctuation">-</span>interaction <span class="token punctuation">-</span><span class="token punctuation">-</span>prefer<span class="token punctuation">-</span>dist</span>
<span class="line">  <span class="token punctuation">-</span> php artisan key<span class="token punctuation">:</span>generate</span>
<span class="line">  <span class="token punctuation">-</span> php artisan dusk<span class="token punctuation">:</span>chrome<span class="token punctuation">-</span>driver</span>
<span class="line"></span>
<span class="line"><span class="token key atrule">before_script</span><span class="token punctuation">:</span></span>
<span class="line">  <span class="token punctuation">-</span> google<span class="token punctuation">-</span>chrome<span class="token punctuation">-</span>stable <span class="token punctuation">-</span><span class="token punctuation">-</span>headless <span class="token punctuation">-</span><span class="token punctuation">-</span>disable<span class="token punctuation">-</span>gpu <span class="token punctuation">-</span><span class="token punctuation">-</span>remote<span class="token punctuation">-</span>debugging<span class="token punctuation">-</span>port=9222 http<span class="token punctuation">:</span>//localhost &amp;</span>
<span class="line">  <span class="token punctuation">-</span> php artisan serve <span class="token punctuation">-</span><span class="token punctuation">-</span>no<span class="token punctuation">-</span>reload &amp;</span>
<span class="line"></span>
<span class="line"><span class="token key atrule">script</span><span class="token punctuation">:</span></span>
<span class="line">  <span class="token punctuation">-</span> php artisan dusk</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="github-actions" tabindex="-1"><a class="header-anchor" href="#github-actions"><span>GitHub Actions</span></a></h3>
<p>如果你正在使用 <a href="https://github.com/features/actions" target="_blank" rel="noopener noreferrer">Github Actions</a> 来运行你的 Dusk 测试，你应该使用以下这份配置文件为模版。像 TravisCI 一样，我们使用 <code v-pre>php artisan serve</code> 命令来启动 PHP 的内置 Web 服务：</p>
<div class="language-yaml line-numbers-mode" data-highlighter="prismjs" data-ext="yml" data-title="yml"><pre v-pre class="language-yaml"><code><span class="line"><span class="token key atrule">name</span><span class="token punctuation">:</span> CI</span>
<span class="line"><span class="token key atrule">on</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>push<span class="token punctuation">]</span></span>
<span class="line"><span class="token key atrule">jobs</span><span class="token punctuation">:</span></span>
<span class="line"></span>
<span class="line">  <span class="token key atrule">dusk-php</span><span class="token punctuation">:</span></span>
<span class="line">    <span class="token key atrule">runs-on</span><span class="token punctuation">:</span> ubuntu<span class="token punctuation">-</span>latest</span>
<span class="line">    <span class="token key atrule">env</span><span class="token punctuation">:</span></span>
<span class="line">      <span class="token key atrule">APP_URL</span><span class="token punctuation">:</span> <span class="token string">"http://127.0.0.1:8000"</span></span>
<span class="line">      <span class="token key atrule">DB_USERNAME</span><span class="token punctuation">:</span> root</span>
<span class="line">      <span class="token key atrule">DB_PASSWORD</span><span class="token punctuation">:</span> root</span>
<span class="line">      <span class="token key atrule">MAIL_MAILER</span><span class="token punctuation">:</span> log</span>
<span class="line">    <span class="token key atrule">steps</span><span class="token punctuation">:</span></span>
<span class="line">      <span class="token punctuation">-</span> <span class="token key atrule">uses</span><span class="token punctuation">:</span> actions/checkout@v3</span>
<span class="line">      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Prepare The Environment</span>
<span class="line">        <span class="token key atrule">run</span><span class="token punctuation">:</span> cp .env.example .env</span>
<span class="line">      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Create Database</span>
<span class="line">        <span class="token key atrule">run</span><span class="token punctuation">:</span> <span class="token punctuation">|</span><span class="token scalar string"></span>
<span class="line">          sudo systemctl start mysql</span>
<span class="line">          mysql --user="root" --password="root" -e "CREATE DATABASE \`my-database\` character set UTF8mb4 collate utf8mb4_bin;"</span></span>
<span class="line">      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Install Composer Dependencies</span>
<span class="line">        <span class="token key atrule">run</span><span class="token punctuation">:</span> composer install <span class="token punctuation">-</span><span class="token punctuation">-</span>no<span class="token punctuation">-</span>progress <span class="token punctuation">-</span><span class="token punctuation">-</span>prefer<span class="token punctuation">-</span>dist <span class="token punctuation">-</span><span class="token punctuation">-</span>optimize<span class="token punctuation">-</span>autoloader</span>
<span class="line">      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Generate Application Key</span>
<span class="line">        <span class="token key atrule">run</span><span class="token punctuation">:</span> php artisan key<span class="token punctuation">:</span>generate</span>
<span class="line">      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Upgrade Chrome Driver</span>
<span class="line">        <span class="token key atrule">run</span><span class="token punctuation">:</span> php artisan dusk<span class="token punctuation">:</span>chrome<span class="token punctuation">-</span>driver <span class="token punctuation">-</span><span class="token punctuation">-</span>detect</span>
<span class="line">      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Start Chrome Driver</span>
<span class="line">        <span class="token key atrule">run</span><span class="token punctuation">:</span> ./vendor/laravel/dusk/bin/chromedriver<span class="token punctuation">-</span>linux &amp;</span>
<span class="line">      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Run Laravel Server</span>
<span class="line">        <span class="token key atrule">run</span><span class="token punctuation">:</span> php artisan serve <span class="token punctuation">-</span><span class="token punctuation">-</span>no<span class="token punctuation">-</span>reload &amp;</span>
<span class="line">      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Run Dusk Tests</span>
<span class="line">        <span class="token key atrule">run</span><span class="token punctuation">:</span> php artisan dusk</span>
<span class="line">      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Upload Screenshots</span>
<span class="line">        <span class="token key atrule">if</span><span class="token punctuation">:</span> failure()</span>
<span class="line">        <span class="token key atrule">uses</span><span class="token punctuation">:</span> actions/upload<span class="token punctuation">-</span>artifact@v2</span>
<span class="line">        <span class="token key atrule">with</span><span class="token punctuation">:</span></span>
<span class="line">          <span class="token key atrule">name</span><span class="token punctuation">:</span> screenshots</span>
<span class="line">          <span class="token key atrule">path</span><span class="token punctuation">:</span> tests/Browser/screenshots</span>
<span class="line">      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Upload Console Logs</span>
<span class="line">        <span class="token key atrule">if</span><span class="token punctuation">:</span> failure()</span>
<span class="line">        <span class="token key atrule">uses</span><span class="token punctuation">:</span> actions/upload<span class="token punctuation">-</span>artifact@v2</span>
<span class="line">        <span class="token key atrule">with</span><span class="token punctuation">:</span></span>
<span class="line">          <span class="token key atrule">name</span><span class="token punctuation">:</span> console</span>
<span class="line">          <span class="token key atrule">path</span><span class="token punctuation">:</span> tests/Browser/console</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接<br>
我们的翻译工作遵照 <a href="https://learnku.com/docs/guide/cc4.0/6589" target="_blank" rel="noopener noreferrer">CC 协议</a>，如果我们的工作有侵犯到您的权益，请及时联系我们。</p>
</blockquote>
<hr>
<blockquote>
<p>原文地址：<a href="https://learnku.com/docs/laravel/10.x/dusk/14898" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/10.x/du...</a></p>
<p>译文地址：<a href="https://learnku.com/docs/laravel/10.x/dusk/14898" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/10.x/du...</a></p>
</blockquote>
</div></template>


